<template>
  <a-modal
    :open="visible"
    width="416px"
    title="参与打榜"
    wrap-class-name="participation-modal"
    :body-style="{ padding: '24px 32px 0' }"
    centered
    :ok-button-props="{
      loading: okButtonLoading
    }"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form
      ref="participationModalFormRef"
      class="participation-modal-form"
      label-align="left"
      :model="formState"
      name="participation-modal-form"
      autocomplete="off"
    >
      <a-form-item label="评测数据集" name="id" :rules="[{ required: true, message: '请选择评测数据集' }]">
        <p class="text">{{ formState.name }}</p>
      </a-form-item>

      <a-form-item label="提交文件" name="file" :rules="[{ required: true, message: '请提交文件' }]">
        <file-upload
          ref="fileUploadRef"
          v-model:file-url="formState.file"
          :file-name="formState.fileName"
          class="file-upload w-232"
          :max-count="1"
          :is-preview="false"
          accept="zip"
          suffix="zip"
          :max-file-size="1024"
          :module-custom-prefix="uploadDir"
          @uploadSuccessAfter="onUploadSuccessAfter"
        >
          <a-button type="text" size="small" style="padding: 0" class="icon-with-btn btn-mini upload-btn">
            <i class="iconfont icon-upload-line"></i>
            上传
          </a-button>
        </file-upload>
        <p class="upload-info">(至多上传1个大小不超过1G的zip文件)</p>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { type FormInstance, message } from 'ant-design-vue'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  import FileUpload from '@/components/upload/FileUpload/index.vue'
  import { hitContestApi } from '@/services/api'

  interface FormState {
    id?: string | number
    name?: string
    file?: string
    fileName?: string
  }

  const emits = defineEmits<{
    (e: 'submit', formState: FormState): void
    (e: 'success'): void
  }>()

  const formState = ref<FormState>({
    id: '',
    name: '',
    file: '',
    fileName: ''
  })
  const uploadDir = ref('')
  const visible = ref(false)
  const fileUploadRef = ref<InstanceType<typeof FileUpload>>()
  const participationModalFormRef = ref<FormInstance>()

  const { loading: okButtonLoading, runAsync: runParticipation } = useRequest(hitContestApi.participation)
  const handleSubmit = async () => {
    await participationModalFormRef?.value?.validate()
    emits('submit', formState.value)
    try {
      await runParticipation({ taskId: formState.value.id, fileUrl: formState.value.file }, { isAddUid: true })
      message.success('参与成功')
      fileUploadRef.value?.remove()
      resetFrom()
      visible.value = false
      emits('success')
    } catch (error) {
      console.error(error)
    }
  }

  const setFrom = (state: FormState) => {
    Object.assign(formState.value, state)
  }

  const resetFrom = () => {
    formState.value = {
      id: '',
      name: '',
      file: '',
      fileName: ''
    }
  }

  const handleCancel = () => {
    // Modal.confirm({
    //   title: '提示',
    //   content: '确定要取消参与吗？',
    //   okText: '确定',
    //   cancelText: '取消',
    //   centered: true,
    //   onOk: () => {
    //     fileUploadRef.value?.remove()
    //     resetFrom()
    //     visible.value = false
    //   }
    // })
    participationModalFormRef?.value?.clearValidate()
    fileUploadRef.value?.remove()
    resetFrom()
    visible.value = false
  }

  const getTaskDir = async () => {
    const { data } = await hitContestApi.getTaskDir({ taskId: formState.value.id })
    uploadDir.value = data?.dir
    formState.value.name = data?.assessmentDataName
  }

  const onUploadSuccessAfter = (file: File) => {
    formState.value.fileName = file.name
  }

  defineExpose({
    setFrom,
    resetFrom,
    changeLoading: (bool: boolean) => {
      okButtonLoading.value = bool
    },
    open: (state?: FormState) => {
      fileUploadRef.value?.clearList()
      Object.assign(formState.value, state)
      getTaskDir()
      visible.value = true
    },
    close: handleCancel
  })
</script>

<style lang="less" scoped>
  .participation-modal-form {
    .ant-form-item {
      :deep(.ant-form-item-label) {
        width: 120px;
      }
    }

    :deep(.ant-upload-list-item) {
      background: #fff;

      a {
        color: @text01 !important;
      }
    }

    .upload-btn {
      padding: 0;
      color: rgba(0, 156, 248, 1);
    }

    .text {
      font-size: 14px;
      color: rgba(25, 25, 48, 0.75);
      font-weight: 400;
    }

    .upload-info {
      margin-top: 8px;
      font-size: 12px;
      color: rgba(17, 22, 31, 0.52);
      font-weight: 400;
    }
  }
</style>
